import React, { Component, createRef } from 'react'
import EventEmitter from 'events'

import MyBtn from './MyBtn'


const EventBus = new EventEmitter()
const style = {
  box: {
    border: '1px solid #ddd',
    borderRadius: 10,
    padding: 15,
    margin: 15
  }
}

export default class MyStatePlus extends Component {
  state = {
    num: 1,
    flag: true,
    word: '别有关 就两断'
  }

  changeWord = (word) => {
    this.setState({
      word
    })
  }

  changeNum = (num) => {
    this.setState({
      num: this.state.num + num
    })
  }

  changeFlag = () => {
    this.setState({
      flag: !this.state.flag
    })
  }

  changeTwoList = () => {
    this.childTwo.changeList()
  }

  changeTwoMsg = () => {
    this.childTwo.setState({
      msg: '听你呼吸里的伤,听你心跳里的狂'
    })
  }


  render() {
    const { num, flag, word } = this.state
    return (
      <div style={style.box}>
        {flag ? <div >
          <h3>React 组件通信（子改父 + 兄弟组件通信）</h3>
          <h4>num = {num}</h4>
          <h4>word = {word}</h4>
        </div> : <div><h1>404</h1></div>}

        <MyChildOne ref={el => this.childOne = el} word={word} changeWord={this.changeWord} changeNum={this.changeNum} changeFlag={this.changeFlag} changeTwoList={this.changeTwoList} changeTwoMsg={this.changeTwoMsg}></MyChildOne>

        <MyChildTwo ref={el => this.childTwo = el} num={num} word={word} flag={flag}></MyChildTwo>
      </div>
    )
  }
}


class MyChildOne extends Component {
  myRef = createRef()

  changeBusOne = () => {
    console.log(this.myRef);
    this.myRef.current.style.color = 'red'

    EventBus.emit('changem', 'Hello React')
  }


  changeTwoListByBus = () => {
    EventBus.emit('changeTwoListByBus')
  }

  render() {
    const { word, changeWord, changeNum, changeFlag, changeTwoList, changeTwoMsg } = this.props
    return (
      <div style={style.box}>
        <h3 ref={this.myRef}>MyChildOne - 1 - one </h3>
        <div>
          <input type='text' value={word} ref={el => this.inp = el} onChange={() => changeWord(this.inp.value)} />
        </div>
        <br />
        <MyBtn text='change Num' onClick={() => changeNum(1)}></MyBtn>
        <br />
        <MyBtn text='change Flag' onClick={changeFlag}></MyBtn>
        <br />
        <MyBtn text='change Two List' onClick={changeTwoList}></MyBtn>
        <br />
        <MyBtn text='change Two Msg' onClick={changeTwoMsg}></MyBtn>
        <br />
        <MyBtn text='changeTwoMsgByBus' onClick={this.changeBusOne}></MyBtn>
        <br />
        <MyBtn text='changeTwoListByBus' onClick={this.changeTwoListByBus}></MyBtn>
      </div>
    )
  }
}

class MyChildTwo extends Component {
  state = {
    msg: '拦路雨偏似雪花 饮泣的你冻吗',
    list: ['亚索', '永恩', '提莫', '薇恩', '卡莎']
  }

  componentDidMount() {  // 生命周期钩子函数
    // 监听事件
    EventBus.on('changem', msg => {
      this.setState({
        msg
      })
    })

    // 仅允许监听一次
    EventBus.once('changeTwoListByBus', this.changeList)
  }


  changeList = () => {
    this.state.list.pop()
    this.setState({
      list: this.state.list
    })
  }


  render() {
    const { num, word, flag } = this.props
    const { msg, list } = this.state
    return (
      <div style={style.box}>
        <h3>MyChildTwo - 2 - two</h3>
        <h4>num = {num}</h4>
        <h4>word = {word}</h4>
        <h4>msg = {msg}</h4>
        {
          flag && <div style={{ width: 100, height: 100, background: 'orange' }}></div>
        }
        {
          list.map(item => {
            return (
              <h4 key={item}>{item}</h4>
            )
          })
        }
        <hr />
        <MyDemo msg='雪下的时候' head={<div><h3>head - 头部</h3></div>}>
          <h3>如果你有空,陪我过个冬</h3>
          <h3>这话多像肆意的寒风</h3>
          <h3>我不会感动,不会道保重</h3>
          <h3>你有多想我无动于衷</h3>
        </MyDemo>
      </div>
    )
  }
}


// React 插槽
// 插槽属于内容分发 父组件动态传给子组件的内容模板
// this.props.children 匿名插槽
const arr = ['艾欧尼亚', '德玛西亚', '祖安', '皮尔吉沃特', '德克萨斯', '弗雷尔卓德']
class MyDemo extends Component {
  render() {
    const { msg, children, head } = this.props
    return (
      <div>
        <h3>MyDemo - MyDemo</h3>
        <h4>{msg}</h4>
        <div>{children}</div>
        <div>{head}</div>
        <MyList arr={arr}>
          {arr}
        </MyList>
      </div>
    )
  }
}

class MyList extends Component {
  render() {
    const { children } = this.props

    return (
      <div>
        <h3>MyList - MyList</h3>
        {
          children.map(item => {
            return (
              <h4 key={item}>{item}</h4>
            )
          })
        }
        <MyLast msg={'回忆纯白的梦里花'}>
          <h3>onchange</h3>
          <h3>onClick</h3>
        </MyLast>
      </div>
    )
  }
}


const MyLast = ({
  msg,
  children
}) => {
  return (
    <div>
      <h3>MyLast - MyLast</h3>
      <h4>msg = {msg}</h4>
      <div>{children}</div>
    </div>
  )
}
